<template>
  <div class="goods">
    <!-- 分类 -->
    <div class="tab">
      <div class="tabBox">
          <div class="logo">
          <img src="../../../assets/前台logo.webp">
      </div>
      <div class="types">
          <!-- <div><router-link to="/mall/first" class="first"  >首页</router-link></div> -->
          <div class="items" v-for="(item,index) in activeList" :key="index">
              <a href="#" :class="{'active' : item.isActive}" @click="toFoodList(index)">{{ item.name }}</a>
          </div>
      </div>
    <div class="input">
        <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="inputValue"
            @keyup.enter.native="handleAddBook">
        </el-input>
    </div>
    <div class="cart">
        <div @click="toCart">
            <i class="el-icon-shopping-cart-1"></i>
        </div>
    </div>
    </div>
  </div>
    <!-- 商品列表 -->
    <div class="goods_list">
      <div class="goods_item" 
      v-for="item in goodsList" 
      :key="item.goodsId"
      @click="toDetail(item)"
      >
        <div class="goods_img">
          <img :src="item.goodsImg" alt="">
        </div>
        <div class="goods_detail">
          <div style="font-size: 1.8vw;">{{ item.goodsName }}</div>
          <div style="font-size:2vw;color:red">￥{{ item.goodsPrice }}</div>
        </div>
      </div>
    </div>

    <!--分页区-->
    <div class="goods_page">
      <div style="padding: 10px 0;font-size: 20px;" >
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[12, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
    
  </div>
</template>

<script>
import Bus from '../../../Bus'
export default {
  data(){
    return{
      pageSize:12,
      pageNum:1,
      total:0,
      goodsList:[],
      inputValue:'',
      type:'',
      activeList:[
          {isActive:true,name:'全部'},
          {isActive:false,name:'居家'},
          {isActive:false,name:'食品'},
          {isActive:false,name:'服饰'},
          {isActive:false,name:'文化'},
          {isActive:false,name:'数码'},
          {isActive:false,name:'家电'},
      ],
      
    }
  },
  methods:{
    //  请求页面查询数据
    async load(){
      // if(localStorage.getItem('product')){
      //   let product=JSON.parse(localStorage.getItem('product'))
      //   this.activeList.map(item=>item.isActive=false)
      //   let index=this.activeList.findIndex(item=>item.name==product.type)
      //   this.activeList[index].isActive=true
      // }
      this.activeList=JSON.parse(localStorage.getItem('activeList'))  
      // let activeList=JSON.parse(localStorage.getItem('activeList'))
      this.activeList.forEach(item => {
        if(item.isActive){
          this.type=item.name=='全部'?'':item.name
        }
      });
      let res=await this.request('/goods/page',{
          params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          goodsName:this.inputValue,
          goodsType:this.type
        }
      })
      this.goodsList=res.data.records
      this.total=res.data.total
      this.goodsList=this.goodsList.filter(item=>item.goodsState==true)
    },

    //#region (分类、输入框搜索、跳转购物车)
    // 点击分类名字统一跳转产品列表路由(query传参)
    toFoodList(index){
      this.inputValue=''
        this.type=this.activeList[index].name
        if(this.type=='全部'){
          this.type=''
        }
        // console.log('type:',this.type);
        this.activeList.forEach((item)=>{
          item.isActive=false
        })
        this.activeList[index].isActive=true
        localStorage.setItem('activeList',JSON.stringify(this.activeList))
        this.load()
    },
    // 点击搜索框按下回车按钮
    enterEvent(){
      document.onkeydown = e =>{
        let body = document.getElementsByTagName('body')[0]
        if (e.keyCode === 13 && e.target.baseURI.match('/mall/category') && e.target === body) {
          // match(此处应填写文件在浏览器中的地址，如 '/home/index')，不写的话，其他页面也会有调用回车按下的方法
          // console.log('enter');
          this.handleAddBook(); //调用查询方法
        }
      }
    },
    handleAddBook(){
      this.type=''
      // console.log('我按下了回车:',this.inputValue);
      this.load()
    },
    // 点击购物车图标跳往购物车页面
    toCart(){
        this.$router.push('/mall/cart')
    },
    //#endregion








    // -------------------------------------------------------------------------------
    // search(){
    //   console.log('this.input:',this.inputValue);
    // },
    toDetail(item){
      let product={}
      product.id=item.goodsId
      product.name=item.goodsName
      product.src=item.goodsImg
      product.detail=item.goodsDetail
      product.price=item.goodsPrice
      let index=this.activeList.findIndex(item=>item.isActive==true)
      product.type=this.activeList[index].name
      // console.log('product:',JSON.stringify(product));
      localStorage.setItem('product',JSON.stringify(product))
      localStorage.setItem('activeList',JSON.stringify(this.activeList))
      this.$router.push('/mall/detail')
    },

    //#region (分页)
    //分页(一页能容纳的最大数据多少条)
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
    },
    //分页(点击跳到多少页)
    handleCurrentChange(pageNum){
      this.pageNum=pageNum
      this.load()
    }
    //#endregion
  },
  mounted(){
    this.enterEvent()
    // this.activeList=localStorage.getItem('activeList')?JSON.parse(localStorage.getItem('activeList')):this.activeList
    this.load()
  }

}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: content-box;
}
.goods{
  width: 100%;
  /* height: 100%; */
  margin-top: 70px;
  /* background-color: skyblue; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* align-items: center; */
}
.tab{
    /* background-color: orange; */
    width: 100%;
    margin-top: -70px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    z-index: 999;
    overflow: hidden;
    position: sticky;
    /* 当top等于0的时候，就粘滞不动了 */
    top: 0px;
}
.active{
    color: rgb(39,186,155);
    font-weight: bold;
}
.types .active {
    color: rgb(39,186,155);
    /* color: red; */
    font-weight: 600;
}
.tabBox{
    width: 80%;
    height: 100px;
    /* background-color: greenyellow; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.logo{
    width: 11.52%;
    /* height: auto; */
    display: flex;
    align-items: center;
}
.logo img{
    width: 100%;
    height: auto;
}
.types{
    /* background-color: red; */
    width: 57.61%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.items{
    width: 12%;
    height: 100px;
    line-height: 100px;
    text-align: center;
    
}

.items a{
    color: black;
    font-size: 1.8vw;
    text-decoration: none;
}
.first:hover,.items a:hover{
    color: rgb(39,186,155);
}
.input{
    width: 220px;
    height: 100px;
    /* background-color: orange; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart{
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    align-items: center;
    width:80px;
    height: 100px;
    cursor: pointer;
    font-size: 25px;
}
.cart a{
    color: black;
}



/* --------------------------------------------------------------------------------- */

.goods_list{
  width: 80%;
  /* height: 90%; */
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 10px;
  /* padding-top: 10px; */
  /* margin-top: -50px; */
}
.goods_item{
  width: 21.39%;
  /* height: 330px; */
  display: flex;
  flex-direction: column;
  transition: all 0.5s;
  /* border: 1px solid #999; */
  border-radius: 10px;
  margin-bottom: 10px;
}

.goods_item:hover{
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.goods_img{
  width: 100%;
  
}
.goods_img img{
  width: 100%;
  border-radius: 10px;
}
.goods_detail{
  flex:1;
  margin-top: -4px;
  background-color: #f0f9f4;
  /* background-color: yellowgreen; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* 食物分页 */
.goods_page{
  width: 78%;
  height: 100px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}
</style>